<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="resources/js/lib/jqueryuimap/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script src="resources/js/lib/jqueryuimap/markerclusterer.min.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/js/feedUtils.js"></script>

<link rel="stylesheet" type="text/css" href="resources/js/lib/jgplot/jquery.jqplot.min.css" />

<script type="text/javascript">
    var STREAMING_SERVICE = "<c:out value = "${serverName}"/>/norsemanserver/streaming/";
    var routeId = <c:out value = "${routeId}"/>;

    var mapGraphPoint = [];
    <c:forEach items="${mapPoints}" var="mapPoint">
    mapGraphPoint.push([<c:out value = "${mapPoint.distance/1000}"/>, <c:out value = "${mapPoint.geoPoint.altitude}"/>]);
    </c:forEach>
    var athleteLocation = [];
    athleteLocation.push([<c:out value = "${athleteLocationInProfileMap.distance/1000}"/>, <c:out value = "${athleteLocationInProfileMap.geoPoint.altitude}"/>]);

    $(document).ready(function () {
        initialize()
    });

    function initialize() {
        $('#map_canvas').gmap({'disableDefaultUI':true, 'callback':function () {
            this.loadKML('norseman', '<c:out value = "${routeMapPath}"/>');
            <c:forEach items="${mediaList}" var="media">
            this.addMarker({
                        'bounds':true,
                        'position':new google.maps.LatLng(<c:out value = "${media.lat}"/>, <c:out value = "${media.lng}"/>),
                        'title':'At <c:out value = "${media.timestampString}"/> by <c:out value = "${media.username}"/>',
                        'icon':'<c:out value = "${serverName}"/>/norsemanserver/<c:out value = "${media.iconPath}"/>' }
            ).click(function () {
                        this.get('map').panTo($(this)[0].getPosition());
                        $.prettyPhoto.open('<c:out value = "${media.relativeFilePath}"/>', '', 'At <c:out value = "${media.timestampString}"/> by <c:out value = "${media.username}"/>');
                    });
            </c:forEach>

            this.set('MarkerClusterer', new MarkerClusterer(this.get('map'), this.get('markers')));

            <c:if test="${athleteLocation != null}">
            this.addMarker({
                        'bounds':true,
                        'position':new google.maps.LatLng(<c:out value = "${athleteLocation.lat}"/>, <c:out value = "${athleteLocation.lng}"/>),
                        'title':'<c:out value = "${athleteLocation.username}"/>',
                        'icon':'<c:out value = "${serverName}"/>/norsemanserver/resources/images/cycling.png' }
            ).click(function () {
                        this.get('map').panTo($(this)[0].getPosition());
                        $('#map_canvas').gmap('openInfoWindow', { 'content':'<c:out value = "${athleteLocation.fullname}"/>' }, this);
                    });
            </c:if>
        }});

    <c:if test="${startUpGeoPoint != null}">
        $('#map_canvas').gmap().bind('init', function () {
            $('#map_canvas').gmap({ 'center':'(<c:out value = "${startUpGeoPoint.lat}"/>, <c:out value = "${startUpGeoPoint.lng}"/>' });
            $('#map_canvas').gmap('option', 'zoom', 7);
        });
    </c:if>

        $.jqplot('map_graph', [mapGraphPoint, athleteLocation],{
            series:[
                {
                    showMarker:true,
                    fill:true,
                    fillAndStroke: true,
                    fillColor: '#D4A017'
                },
                {
                    showMarker:true,
                    showLine:false,
                    markerOptions: {
                        size: 15,
                        color: '#FF0000',
                        style:'x' }
                }
            ],
            axes:{
                xaxis:{
                    label:'kilomters',
                    pad: 0,
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                },
                yaxis:{
                    label:'meters',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 7.5
            },
            cursor: {
                show: false
            }
        });

        //register live location feed comming event
        liveMediaFeedCommingEvent.addHandler(insertNewMediaTickerPost);
    }
</script>